<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <script src="./city.js"></script>
    <style>
        #app {
            width: 800px;
            height: 690px;
            border: 4px solid grey;
        }
        #imag {
            width: 200px;
            height: 200px;
            vertical-align: top;
        }
        #person {
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            姓名：<input type="text" v-model="obj.L1" @Blur="usename()" 
            style="font-weight: 650; width: 450px; height: 21px "/><br /><br />
            头像：<img src="./小萌.png" alt="" id="imag"  style="width: 130px; height: 130px"/><br /><br />
            昵称：<input type="text" v-model="obj.L7" @Blur="nick"  style="width: 450px; height: 21px" /><br /><br />
            性别：<input
              type="radio"
              value="男"
              name="1"
              checked="checked"
              v-model="sex"
            />男
            <input
              type="radio"
              value="女"
              name="1"
              checked="checked"
              v-model="sex"
            />女<br />{{radioall}} <br /><br />
            出生日期：<input
              type="date"
              max="2025-12-19"
              v-model="obj.L2"
              style="width: 425px; height: 21px"
            /><br /><br />
            籍贯：
            <!-- 省 -->
            <select v-model="proindex" @click="out(proindex)" style="height: 21px">
              <option v-for="(item, index) in city" :value="index">
                {{ item.name }}
              </option>
            </select>
            <!-- 市 -->
            <select v-model="cityindex" style="height: 21px">
              <option v-for="(item, index) in city[proindex].city" :value="index">
                {{ item.name }}
              </option>
            </select>
            <!-- 区 -->
            <select v-model="areaindex" style="height: 21px">
              <option
                v-for="(item, index) in city[proindex].city[cityindex].area"
                :value="index"
              >
                {{ item }}
              </option></select
            ><br /><br />
            手机号：<input type="text" v-model="obj.L3" @Blur="phone()"  style="width: 440px; height: 21px" /><br /><br />
            邮箱：<input type="text" v-model="obj.L4" @Blur="email()"  style="width: 455px; height: 21px"/><br /><br />
            入职时间：<input
              type="date"  
              value="2024-12-18"
              v-model="obj.L5"
              style="width: 220px; height: 21px"
            /><br /><br />
            个人介绍：<textarea id="person" v-model="obj.L6" style="width: 210px; height: 80px"></textarea><br /><br />
            <button @click="submit()" style="width: 80px; height: 35px">提交</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data() {
                return {
                    proindex: 15,
                    cityindex: 0,
                    areaindex: 10,
                    city: citys,
                    radioall: '',
                    sex: {},
                    obj: {
                        L1: '',
                        L2: '',
                        L3: '',
                        L4: '',
                        L5: '',
                        L6: '',
                        L7: '',
                    },
                }
            },
            methods: {
                out(index) {
                    let city = 0
                    let area = 0
                    if (index != 0) {
                        this.cityindex = city
                        this.areaindex = area
                    }
                },
                usename() {
                  
                },
                submit() {
                    if (
              this.sex != "" &&
              this.obj.L2 != "" &&
              this.obj.L5 != "" &&
              this.obj.L6 != "" &&
              this.city[this.proindex].name != ""
            ) {
                console.log("姓名:" + this.obj.L1);
              console.log("昵称:" + this.obj.L7);
              console.log("性别:" + this.sex);
              console.log("出生日期:" + this.obj.L2);
              console.log("省:", this.city[this.proindex].name);
              console.log(
                "市:",
                this.city[this.proindex].city[this.cityindex].name
              );
              console.log(
                "区:",
                this.city[this.proindex].city[this.cityindex].area[
                  this.areaindex
                ]
              );
              console.log("手机号:" + this.obj.L3);
              console.log("邮箱:" + this.obj. L4);
              console.log("入职时间:" + this.obj.L5);
              console.log("个人介绍:" + this.obj.L6);
             } else {
              alert("请完善资料");
            }
                },
                nick() {
                    if (/^(?:[\u4e00-\u9fa5·]{2,4})$/g.test(this.obj.L1)) {
                    } else {
                        alert('请输入2~4个字的姓名')
                        this.obj.L1 = ''
                    }
                },
                nicks() {
                  if (this.obj.L7 != '') {  
                  } else {
              alert("请输入昵称");
              this.obj.L1 = "";
            }
                },
                phone() {
            if (/^1[3-9]\d{9}$/g.test(this.obj.L3)) {
            } else {
              alert("请输入11位手机号");
              this.obj.L3 = "";
            }
          },
          email() {
            if (
              /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g.test(
                this.obj.L4
              )
            ) {
            } else {
              alert("请输入正确格式的邮箱");
              this.obj.L4 = "";
            }
          },
            }
        })
    </script>
</body>
</html>